<template>
  <div class="card-box">
    <div class="cTitle flex align-items-center italic-text">
      <span class="title-circle mr16"></span>

      <span>
        <b>{{ props.title }}</b>
        <span class="subheading">{{ props.subheading }}</span>
      </span>
    </div>

    <div class="card-content pl16 mt8">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
const props = defineProps({
    title: String,
    subheading: String,
});

console.log('props', props);
</script>

<style scoped lang="scss">
.card-box{
  background-color: #0a1427;
  padding: 1rem;
  border-radius: 0.5rem;
  padding-bottom: 0;
  box-sizing: border-box;

  .cTitle{
    color: #f1f1f2;
    font-size: 0.875rem;

    .title-circle{
      display: inline-block;
      width: 0.6rem;
      height: 0.6rem;
      background: linear-gradient(135deg, #1A698D, #081121);
      border-radius: 50%;
    }
    .subheading{
      font-size: 0.5rem;
    }
  }

  .card-content{
    height: 100%;
  }
}

// #145676 #081121
</style>
